<!-- 弹窗详情 -->
<template>
	<a-modal v-model:visible="_d.visible" title="新增用户" width="600px"
		:bodyStyle="{minHeight: '300px'}"
		@ok="handleOk">
  	<a-form :label-col="{style: {width: '6em'}}">
			<a-form-item label="登录用户名" v-bind="validateInfos.code">
    		<a-input v-model:value="_d.form.code" placeholder="请输入"></a-input>
    	</a-form-item>
    	<a-form-item label="昵称" v-bind="validateInfos.name">
    		<a-input v-model:value="_d.form.name" placeholder="请输入"></a-input>
    	</a-form-item>
    	<a-form-item label="密码" v-bind="validateInfos.password">
    		<a-input v-model:value="_d.form.password" placeholder="请输入"></a-input>
    	</a-form-item>
    	<a-form-item label="手机号码" v-bind="validateInfos.systemUserId">
				<a-input v-model:value="_d.form.systemUserId" placeholder="请输入"></a-input>
		   </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	import { Form, notification } from 'ant-design-vue';
	import {Verify} from "@/utils/Tools.js";

	const _d = reactive({
		visible: false,

		form: {
			code: '',
			name: '',
			password: '',
			systemUserId: '',
		},

		rules: {
			code: [
				{ required: true, trigger: 'blur', message: '请输入登录用户名' }
			],
			name: [
				{ required: true, trigger: 'blur', message: '请输入昵称' }
			],
			password: [
		 		{ required: true, message: '请输入密码' },
				{ pattern: Verify.password, message: '密码为6-20位的数字字母组成'}
		 	],
		 	systemUserId: [
		 		{ required: true, message: '请输入手机号' },
		 		{ pattern: Verify.phone, message: '请输入正确的手机号码'}
		 	],
		}

	})

	// 验证
	const { resetFields, validate, validateInfos } = Form.useForm(_d.form, _d.rules);

	function open(id) {
		resetFields();

		_d.visible = true;
	}


	// 提交
	function handleOk() {
		validate().then(() => {
			
			
			
		})
	}


	defineExpose({
		open
	})

</script>

<style lang="less">

</style>